<template>
    <div>
      <div ref="chartRef" style="width: 100%; height: 600px;"></div>
      <button v-if="isProvinceSelected" @click="goBackToChinaMap">返回中国地图</button>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, onBeforeUnmount } from 'vue';
  import * as echarts from 'echarts';
  import chinaMapData from './echarts-mapJson-master/china.json';
  import { reactive, toRefs } from 'vue';
  
  // 假设 geometryProvince.json 是一个对象，其键为市份名称，值为该省份下的市级地图数据
  import geometryProvinceData from './echarts-mapJson-master/geometryProvince.json';
  
  echarts.registerMap('china', chinaMapData);
  
  const state = reactive({
    chartRef: ref(null),
    chartInstance: null,
    currentMapType: 'china', // 当前显示的地图类型，初始为中国地图
    isProvinceSelected: false, // 是否选择了省份，用于显示返回按钮
    selectedProvince: null, // 选中的省份名称
  });
  
  const { chartRef, chartInstance, currentMapType, isProvinceSelected, selectedProvince } = toRefs(state);
  
  const initChart = (mapType = 'china', provinceData = null) => {
    if (chartRef.value) {
      if (chartInstance.value) {
        chartInstance.value.dispose();
      }
      chartInstance.value = echarts.init(chartRef.value);
  
      let option = {
        title: {
          text: mapType === 'china' ? '中国地图' : `${selectedProvince.value}地图`,
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        visualMap: {
          min: 0,
          max: 1000,
          left: 'left',
          top: 'bottom',
          text: ['高', '低'],
          calculable: true
        },
        series: [
          {
            name: mapType === 'china' ? '中国' : selectedProvince.value,
            type: 'map',
            mapType: mapType,
            roam: true,
            label: {
              show: true
            },
            data: provinceData ? provinceData.features?.map(feature => ({
              name: feature.properties.name,
              value: Math.round(Math.random() * 1000) // 随机生成的值，用于演示
            })) : (mapType === 'china' ? chinaMapData.features : []).map(feature => ({
              name: feature.properties.name,
              // 对于中国地图，可以随机生成数据或根据实际需求设置
              value: Math.round(Math.random() * 1000)
            }))
          }
        ]
      };
  
      chartInstance.value.setOption(option);
  
      // 添加点击事件监听器
      chartInstance.value.on('click', (params) => {
        if (params.componentType === 'series' && params.seriesType === 'map') {
          if (currentMapType.value === 'china') {
            // 如果是中国地图，则下钻到市级地图
            const provinceName = params.name;
            // 遍历geometryProvinceData中的features来找到匹配的省份
            const provinceFeature = geometryProvinceData.features.find(feature => feature.properties.name === provinceName);
            if (provinceFeature) {
                console.log('====================================');
                console.log(provinceFeature,provinceName);
                console.log('====================================');
              echarts.registerMap(provinceName, provinceFeature);
              state.currentMapType = provinceName;
              state.selectedProvince = provinceName;
              state.isProvinceSelected = true;
              initChart(provinceName, provinceFeature);
            }
          } else {
            // 如果是市级地图，则返回到省级（这里简化为直接返回中国地图）
            state.currentMapType = 'china';
            state.selectedProvince = null;
            state.isProvinceSelected = false;
            initChart();
          }
        }
      });
    }
  };
  
  onMounted(() => {
    initChart();
  });
  
  onBeforeUnmount(() => {
    if (chartInstance.value) {
      chartInstance.value.dispose();
    }
  });
  
  const goBackToChinaMap = () => {
    state.currentMapType = 'china';
    state.selectedProvince = null;
    state.isProvinceSelected = false;
    initChart();
  };
  </script>
  
  <style scoped>
  /* 样式 */
  button {
    margin-top: 10px;
    padding: 5px 10px;
  }
  </style>